<template>
  <div class="box-padding">
    <div class="chart" :id="'chart' + bjindex"></div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
export default {
  name: '',
  data() {
    return {}
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    bjindex: {
      type: Number,
      default: 0,
    },
  },
  created() {},
  mounted() {
    this.line()
  },
  methods: {
    line() {
      const chart = document.getElementById('chart' + this.bjindex)
      const myChart = new Charts(chart)
      const option1 = {
        // title: {
        //   text: '当前库存',
        //   offset: [0, 20],
        //   style: {
        //     fill: '#aaa',
        //     fontWeight: 'normal',
        //     fontSize: 13,
        //   },
        // },
        series: [
          {
            type: 'gauge',
            max: this.data.最大库存,
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 5,
            data: [
              {
                name: '当前库存',
                value: this.data.当前库存,
                // gradient: ['#03c2fd', '#1ed3e5', '#2fded6'],
                gradient:
                  this.data.当前库存 < this.data.最小库存
                    ? ['#ff0000']
                    : ['#03c2fd'],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            backgroundArc: {
              style: {
                fill: '#999',
                opacity: 0.2,
              },
            },
            details: {
              show: true,
              formatter: '{value}',
              // offset: [0, 10],
              style: {
                fill: '#fff',
                // fill: '#1ed3e5',
                fontSize: 14,
                fontWeight: 'normal',
              },
            },
          },
        ],
      }
      myChart.setOption(option1)
      //图表自适应
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
  },
}
</script>

<style scoped>
.chart {
  height: 14vh;
  width: 100%;
}
</style>
